﻿@page "/"
@using AntDesign.Charts
@using Title = AntDesign.Charts.Title
@using QuartzCore.Blazor.Shared;

@*@inherits DrawerTemplate<int?, MessageModel<DashDto>>*@

<h1 style="color: rgba(42, 169, 152, 0.85);">Welcome QzB 平台</h1>
<div>
    <button class="dash btn btn-warning" type="button">
        <div>
            <h1 style="color: #fff">应用</h1>
        </div>
        <div>
            <h2 style="color: #fff" ng-bind="10">@dashDto.appCount</h2>
        </div>
    </button>
    <button class="dash btn btn-info" type="button">
        <div>
            <h1 style="color: #fff">定时作业</h1>
        </div>
        <div>
            <h2 style="color: #fff" ng-bind="10">@dashDto.jobItemCount</h2>
        </div>
    </button>
</div>
@*<SurveyPrompt Title="How is Blazor working for you?" />*@
<div style="margin-top: 50px;">
    <Button Type="@ButtonType.Primary" OnClick="OnRefash" >Refash</Button>
</div>

<Tabs>
    <TabPane Key="1">
        <Tab>作业执行统计</Tab>
        <ChildContent>
            <AntDesign.Charts.Line @ref="@chart1"  Data="data1" Config="config1" OtherConfig="otherConfig1" />
        </ChildContent>
    </TabPane>
</Tabs>


<style>
    .btn-warning {
        color: #fff;
        background-color: #f0ad4e;
        border-color: #eea236;
    }

    .btn-info {
        color: #fff;
        background-color: #5bc0de;
        border-color: #46b8da;
        margin-left: 60px;
    }

    .dash {
        height: 160px;
        width: 24%;
    }
</style>



@code{

    #region 示例1

    //object[] data1 =
    //{
    //    new {date = "00:00:00~02:00:00", value = 3},
    //    new {date = "02:00:00~04:00:00", value = 40},
    //    new {date = "04:00:00~06:00:00", value = 3.5},
    //    new {date = "06:00:00~08:00:00", value = 55},
    //    new {date = "08:00:00~10:00:00", value = 4.9, festival = "劳动节"},
    //    new {date =  "10:00:00~12:00:00", value = 6},
    //    new {date =  "12:00:00~14:00:00", value = 7},
    //    new {date =  "14:00:00~16:00:00", value = 9},
    //    new {date =  "16:00:00~18:00:00", value = 3},
    //    new {date =  "18:00:00~20:00:00", value = 13, festival = "国庆节"},
    //    new {date =  "20:00:00~22:00:00", value = 6},
    //    new {date =  "22:00:00~24:00:00", value = 23}
    //};





    LineConfig config1 = new LineConfig
    {
        Title = new Title
        {
            Visible = true,
            Text = "作业执行折线图"
        },
        Description = new Description
        {
            Visible = true,
            Text = "在折线图上标注重点的数据(图表数据来自mongodb)"
        },
        ForceFit = true,
        Padding = "auto",
        XField = "date",
        YField = "value",
        YAxis = new ValueAxis
        {
            Nice = true
        },
        Label = new Label
        {
            Visible = false
        }
    };

    object otherConfig1 = new
    {
        MarkerPoints = new object[]
        {
            new
            {
                Visible = true,
                data = new object[] {new {date = "08:00:00~10:00:00", value = 4.9}, new {date = "18:00:00~20:00:00" } },
                Label = new
                {
                    Visible = true,
                    Field = "festival"
                }
            }
                                            }
    };

    #endregion 示例1
}
